2023/12/232458字符
选择器
HTML
<div class="box">
<p class="aa">第1行</p>
<p class="bb"><span>第2行</span></p>
<p class="cc">第3行</p>
<p class="dd">第4行</p>
<p class="ee">第5行</p>
<p class="ff">第6行</p>
<p class="gg">第7行</p>
<p></p>
<p class="hh">第9行</p>
</div>
基本选择器
$("p:first").css("color", "#f00"); // 第一个元素
$("p:last").css("color", "#0f0"); // 最后一个元素
$("p:not(:first,:last)").css("color", "#00f"); // 除了第一个元素
$("p:odd").css("background", "#ff0"); // 偶数行元素
$("p:even").css("background", "#0ff"); // 奇数行元素
$("p:eq(3)").css("border", "1px solid #f0f"); // 指定行数元素
$("p:gt(3)").css("border", "1px solid #0ff"); // 指定行数之后元素
$("p:lt(3)").css("border", "1px solid #ff0"); // 指定行数之前元素
$("p:header"); // 标题元素
$("div:animated"); // 正在执行动画的元素
$("p:contains('5')").css("color", "#f00"); // 定义含有所含字符的元素
$("p:has(span)").css("background", "#f0f"); // 含有 span 标签的元素
$("p:parent").css("background", "#f0f"); // 含有文本的元素
$("p:empty").css({ // 不包含子元素或者文本的空元素
width: "100%",
height: "20px",
background: "#ff0"
});
可见性
$("p:hidden"); // 选择不可见元素
$("p:visible"); // 选择可见元素
属性选择器
$("p[class='aa']"); // 含有定义属性名的元素
$("p[class^='first']"); // 以定义属性名开头的元素
$("p[class$='last']"); // 以定义属性名结尾的元素
$("p[class$='center']"); // 包含以定义属性名的元素
$("p[class][class$='last']"); // 含有 class 属性并且以定义属性名结尾的元素
子元素选择器
$("div p:nth-child(2)"); // 父元素的第 2 个子元素
$("div p:nth-child(3n)"); // 父元素中是 3 的倍数子元素
$("div p:first-child"); // 父元素的第一个子元素
$("div p:last-child"); // 父元素的最后一个子元素
$("div p:only-child"); // 父元素的唯一一个子元素
表单选择器
$("input:input"); // :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden :focus
// :enabled 可用元素 :disabled 不可用元素 :checked 被选中元素 :selected 所有option元素